<template>
<!-- <el-upload class="upload-demo"
			ref="upload"
			action="http://172.16.1.230:8000//crm-cust/saveCustFile"
			:on-change="onChange"
			:on-remove="handleRemove"
			:on-exceed="handleExceed"
			:limit="1"
			:http-request="UploadHttp"
			:file-list="fileList"
			:auto-upload="false"
		>
				<el-button slot="trigger" size="small" type="primary">选取文件</el-button>
				<el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
				<div slot="tip" class="el-upload__tip">只能上传pdf文件</div>
			</el-upload>
			//上传显示进度条
			<div v-show="progressFlag" class="head-img">
			    <el-progress :text-inside="true" :stroke-width="14" :percentage="progressPercent" status="success"></el-progress>
			</div> -->
  <div class='container'>

			<el-upload
				class="upload-demo"
				ref="upload"
			action="#"
			:on-change="onChange"
			:on-remove="handleRemove"
			:on-exceed="handleExceed"
			:limit="1"
			:http-request="UploadHttp"
			:file-list="fileList"
			:auto-upload="false"
			>

  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
  	</el-upload>


  </div>
</template>

<script>
import CustomerInfoManageServer from "@/api/customer/CustomerInfoManageServer";
  export default {
    // import引入的组件需要注入到对象中才能使用
    components: {

    },
    // 这里存放数据
    data () {
      return {
        uploadUrl: `${process.env.VUE_APP_CTX_CUST}/saveCustFile`,
       fileList: [],//储存多文件
		progressFlag: false,//进度条初始值隐藏
		progressPercent: 0//进度条初始值
      }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created () {},
    mounted () {},
    // 方法集合
    methods: {
					async UploadHttp(param) {

						var that = this;
					    
						//判断上传文件数量
						if (this.fileList.length == 0) {
							that.$message({
								message: '请选择导入的文件',
								type: 'warning',
								duration:'2000'
							});
						}else{

						//创建FormData();主要用于发送表单数据
						let paramFormData = new FormData();
						var files=param.file;
						//遍历 fileList
						
						paramFormData.append("file", files);
					    paramFormData.append("accName", files.name);
						paramFormData.append("custId", "123");
						paramFormData.append("createBy", "123");
						paramFormData.append("accType", "98410001");
						//修改progressFlag值
						that.progressFlag = true;
						//控制台打印文件信息
						// 

        		const response = await CustomerInfoManageServer.saveCustFile(paramFormData);

         if (response.code == 200) {
         	//进度条
			  that.progressPercent = ((progressEvent.loaded / progressEvent.total) * 100) | 0;
              
         }
						}
					},
					submitUpload() {
						
						this.$refs.upload.submit();
					},
					//文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用
					onChange(file, fileList) {
						this.fileList = fileList;
					},
					handleRemove(file, fileList) {
						this.fileList = fileList;
					},
					handleExceed(files, fileList) {
						this.$message.warning(
							`当前限制选择 5 个文件`
						);
          }


    },
    // 监听属性 类似于data概念
    computed: {},
    // 监控data中的数据变化
    watch: {},
    // 如果页面有keep-alive缓存功能，这个函数会触发
    activated () {},
    // 生命周期 - 挂载完成（可以访问DOM元素）
    beforeCreate () {},
    // 生命周期 - 数据挂载之前
    beforeMount () {},
    // 生命周期 - 数据更新之前
    beforeUpdate() {},
    // 生命周期 - 数据更新之后
    updated () {},
    // 生命周期 - 页面销毁之前
    beforeDestroy() {},
    // 生命周期 - 页面销毁完成
    destroyed () {},
  }
</script>

<style scoped>
  /* @import url(); 引入公共css类 */

</style>
